{% extends 'base.html' %}
{% load static %}

{% block title %}办理资产归还 - {{ borrow.asset.name }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-arrow-left me-2"></i>办理资产归还</h5>
                </div>

                <div class="card-body">
                    {% if borrow.is_overdue %}
                    <div class="alert alert-warning">
                        <h6><i class="fas fa-exclamation-triangle me-2"></i>逾期归还</h6>
                        <p class="mb-0">该资产已逾期 <strong>{{ borrow.days_overdue }}</strong> 天，请及时处理。</p>
                    </div>
                    {% else %}
                    <div class="alert alert-info">
                        <h6><i class="fas fa-info-circle me-2"></i>正常归还</h6>
                        <p class="mb-0">借用人按时归还资产，请检查资产状态并办理归还手续。</p>
                    </div>
                    {% endif %}

                    <!-- 借用信息回顾 -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <h6 class="card-title"><i class="fas fa-laptop me-2"></i>资产信息</h6>
                                    <table class="table table-borderless table-sm mb-0">
                                        <tr>
                                            <td><strong>资产名称：</strong></td>
                                            <td>{{ borrow.asset.name }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>资产编号：</strong></td>
                                            <td><code>{{ borrow.asset.asset_number }}</code></td>
                                        </tr>
                                        <tr>
                                            <td><strong>当前状态：</strong></td>
                                            <td><span class="badge bg-info">{{ borrow.asset.get_status_display }}</span>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <h6 class="card-title"><i class="fas fa-user me-2"></i>借用人信息</h6>
                                    <table class="table table-borderless table-sm mb-0">
                                        <tr>
                                            <td><strong>借用人：</strong></td>
                                            <td>{{ borrow.borrower.get_full_name|default:borrow.borrower.username }}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><strong>借出时间：</strong></td>
                                            <td>{{ borrow.borrowed_at|date:"Y-m-d H:i" }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>预计归还：</strong></td>
                                            <td>{{ borrow.expected_return_date|date:"Y-m-d H:i" }}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 归还表单 -->
                    <form method="post" id="returnForm">
                        {% csrf_token %}

                        <div class="card mb-4">
                            <div class="card-header">
                                <h6 class="mb-0">归还检查</h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="asset_status_check" class="form-label">资产状态检查</label>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="asset_intact"
                                                    required>
                                                <label class="form-check-label" for="asset_intact">
                                                    资产外观完好，无明显损坏
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="asset_functional"
                                                    required>
                                                <label class="form-check-label" for="asset_functional">
                                                    资产功能正常，可正常使用
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="asset_complete">
                                                <label class="form-check-label" for="asset_complete">
                                                    配件齐全（如适用）
                                                </label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="return_location" class="form-label">归还位置确认</label>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="location_correct"
                                                    required>
                                                <label class="form-check-label" for="location_correct">
                                                    已归还到指定位置
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="borrower_confirmed"
                                                    required>
                                                <label class="form-check-label" for="borrower_confirmed">
                                                    借用人已确认归还
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card mb-4">
                            <div class="card-header">
                                <h6 class="mb-0">归还记录</h6>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label for="condition" class="form-label">资产状态描述</label>
                                    <textarea class="form-control" id="condition" name="condition" rows="3"
                                        placeholder="请描述资产归还时的状态，如有损坏或异常请详细说明..."></textarea>
                                </div>

                                <div class="mb-3">
                                    <label for="notes" class="form-label">归还备注</label>
                                    <textarea class="form-control" id="notes" name="notes" rows="3"
                                        placeholder="请输入归还过程中的其他备注信息..."></textarea>
                                </div>
                            </div>
                        </div>

                        <!-- 归还提醒 -->
                        <div class="alert alert-success">
                            <h6><i class="fas fa-check-circle me-2"></i>归还确认</h6>
                            <ul class="mb-0">
                                <li>办理归还后，资产状态将恢复为"闲置"</li>
                                <li>借用记录将标记为"已归还"并记录归还时间</li>
                                <li>如发现资产损坏，请在状态描述中详细记录</li>
                                <li>归还信息将发送给借用人确认</li>
                            </ul>
                        </div>

                        <!-- 操作按钮 -->
                        <div class="d-flex justify-content-between">
                            <a href="{% url 'assets:borrow_request_detail' borrow.pk %}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left me-1"></i>返回详情
                            </a>
                            <div>
                                <button type="button" class="btn btn-outline-danger me-2" onclick="history.back()">
                                    <i class="fas fa-times me-1"></i>取消
                                </button>
                                <button type="submit" class="btn btn-success">
                                    <i class="fas fa-check me-1"></i>确认归还
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.getElementById('returnForm');
        const conditionField = document.getElementById('condition');

        // 监听检查项变化
        const checkboxes = document.querySelectorAll('input[type="checkbox"]');
        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function () {
                updateConditionField();
            });
        });

        function updateConditionField() {
            const intact = document.getElementById('asset_intact').checked;
            const functional = document.getElementById('asset_functional').checked;
            const complete = document.getElementById('asset_complete').checked;

            let condition = [];

            if (intact) condition.push('外观完好');
            if (functional) condition.push('功能正常');
            if (complete) condition.push('配件齐全');

            if (condition.length > 0 && conditionField.value.trim() === '') {
                conditionField.value = condition.join('，') + '。';
            }
        }

        // 表单提交验证
        form.addEventListener('submit', function (e) {
            const requiredChecks = document.querySelectorAll('input[type="checkbox"][required]');
            let allChecked = true;

            requiredChecks.forEach(checkbox => {
                if (!checkbox.checked) {
                    allChecked = false;
                }
            });

            if (!allChecked) {
                e.preventDefault();
                alert('请完成所有必要的检查项');
                return false;
            }

            // 确认归还
            if (!confirm('确定要办理资产归还吗？')) {
                e.preventDefault();
                return false;
            }
        });
    });
</script>
{% endblock %}